/*
 Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
 SPDX-License-Identifier: Apache-2.0
*/

@use 'sass:map';
@use '../internal/styles/tokens' as awsui;
@use '../internal/styles' as styles;
@use '@cloudscape-design/component-toolkit/internal/focus-visible' as focus-visible;
@use '../internal/generated/custom-css-properties/index.scss' as custom-props;
@use '../internal/styles/foundation' as foundation;

@use './motion';

.root {
  @include styles.styles-reset;
  @include styles.text-flex-wrapping;
  display: block;

  &.hidden {
    display: none;
  }
}

.alert {
  @include styles.styles-reset;
  position: relative;
  display: flex;
  flex-direction: row;
  border-block: awsui.$border-width-alert solid;
  border-inline: awsui.$border-width-alert solid;
  border-start-start-radius: awsui.$border-radius-alert;
  border-start-end-radius: awsui.$border-radius-alert;
  border-end-start-radius: awsui.$border-radius-alert;
  border-end-end-radius: awsui.$border-radius-alert;
  padding-block: awsui.$space-alert-vertical;
  padding-inline: awsui.$space-alert-horizontal;
  background-color: awsui.$color-background-container-content;

  #{custom-props.$alertFocusRingBoxShadow}: 0 0 0
    var(#{custom-props.$alertFocusRingBorderWidth}, foundation.$box-shadow-focused-width)
    var(#{custom-props.$alertFocusRingBorderColor}, awsui.$color-border-item-focused);
}

.alert-wrapper {
  flex: 1;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  column-gap: awsui.$space-alert-action-left;
}

.hidden {
  display: none;
}
// visibly hidden, but focusable
.initial-hidden {
  overflow: hidden;
  block-size: 0;
}

.header,
.header-replacement {
  font-weight: styles.$font-weight-bold;
}

.action {
  white-space: nowrap;
}

.action-slot,
.action-button {
  /* used in test-utils */
}

.alert-focus-wrapper {
  flex: 1;
  min-inline-size: 70%;
  display: grid;
  grid-template-columns: min-content auto;

  &:focus {
    outline: none;
  }
  @include focus-visible.when-visible {
    @include styles.focus-highlight(
      $gutter: awsui.$space-button-focus-outline-gutter,
      $border-radius: var(#{custom-props.$alertFocusRingBorderRadius}, awsui.$border-radius-control-default-focus-ring),
      $box-shadow: var(#{custom-props.$alertFocusRingBoxShadow})
    );
  }
}

.text {
  min-inline-size: 0;
  // To account for vertical misalignment due to button borders
  padding-block: awsui.$border-width-button;
  padding-inline: 0;
  margin-block: awsui.$space-scaled-xxs;
  margin-inline: awsui.$space-xxs;
  &.icon {
    margin-inline-start: 0;
  }
  &.message {
    margin-inline-end: awsui.$space-alert-message-right;
  }
}

.action-wrapped {
  margin-block-end: awsui.$space-xxs;
}

.icon-size-medium > .alert-wrapper > .action-wrapped {
  margin-inline-start: calc(#{awsui.$size-icon-medium} + #{awsui.$space-xs});
}
.icon-size-big > .alert-wrapper > .action-wrapped {
  margin-inline-start: calc(#{awsui.$size-icon-big} + #{awsui.$space-xs});
}
.icon-size-normal > .alert-wrapper > .action-wrapped {
  margin-inline-start: calc(#{awsui.$size-icon-normal} + #{awsui.$space-xs});
}

.content,
.content-replacement {
  /* used in test-utils */
}

.dismiss {
  margin-inline-end: calc(-1 * #{awsui.$space-xxs});
  margin-inline-start: awsui.$space-s;
}

.dismiss-button {
  /* used in test-utils */
}

$_border-colors: (
  'error': awsui.$color-border-status-error,
  'warning': awsui.$color-border-status-warning,
  'success': awsui.$color-border-status-success,
  'info': awsui.$color-border-status-info,
);

$_background-colors: (
  'error': awsui.$color-background-status-error,
  'warning': awsui.$color-background-status-warning,
  'success': awsui.$color-background-status-success,
  'info': awsui.$color-background-status-info,
);

$_text-colors: (
  'error': awsui.$color-text-status-error,
  'warning': awsui.$color-text-status-warning,
  'success': awsui.$color-text-status-success,
  'info': awsui.$color-text-status-info,
);

@each $type in map.keys($_text-colors) {
  .type-#{$type} {
    border-color: #{map.get($_border-colors, $type)};
    background-color: #{map.get($_background-colors, $type)};
    > .alert-wrapper > .alert-focus-wrapper > .icon {
      color: var(#{custom-props.$alertIconColor}, #{map.get($_text-colors, $type)});
    }
  }
}
